import Vue from "vue";
import Vuex from "vuex";
import * as permissApi from "@/api/permission"
//引入递归路由的方法
import recursionRoutes from "@/utils/recursionRoutes"
// 引入所有的路由
import allRoutes from "@/router/generateRoutes"
// console.log(allRoutes)
//引入动态路由
import dynamicRoutes from "@/router/dynamicRoutes"
import router from "@/router"
//引入持久化存储
import createPersistedState from "vuex-persistedstate"


Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userMenu:[],
    userInfo:{},//用户信息
    currentProduct: {},//当前充值的产品对象
  },
  getters: {},
  mutations: {
    //设置用户菜单
    SET_MENULIST(state,payload){
      state.userMenu = [...payload] //浅拷贝
      // console.log("p",payload);

      //动态添加路由,引入dynamic路由,进行匹配,匹配到 path==="/"这个对象,让我们用户路由中的结果,成为这个对象的children
      let target = dynamicRoutes.find(route => route.path === "/")
      //先解构静态页面在拼接动态加入的
      target.children = [...target.children,...payload]

      //动态的将路由添加到根路由的routes选项中

      //router.addRoute 动态添加路由,参数是一个对象,这个对象必须符合routes的配置
      router.addRoute(target)
    },
    SET_USERINFO(state,payload){
      state.userInfo = payload
    },
    //设置当前充值的产品
    SET_CURRENT_PRODUCT(state, payload) {
      state.currentProduct = payload
    }
  },
  actions: {
    //请求菜单数据,根据菜单数据计算出角色(role)的菜单和当前角色的合法路由
    async FETCH_MENULIST(context, payload) {
      return permissApi.getMenuList().then(res => {
        // console.log(res)
        //后端返回的菜单数据
        let { menuList } = res.data
        console.log(res)
        // console.log("@",menuList)
        //调用 recursionRoutes
        let userRoutes = recursionRoutes(allRoutes[0].children,menuList)
        //让mutation进行处理
        // context.commit("SET_MENULIST",menuList)
        // console.log(userRoutes)
        context.commit("SET_MENULIST",userRoutes)

      })
    }


  },
  modules: {},
   /* vuex数据持久化配置 */
   plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.localStorage,
      // 存储的 key 的key值
      key: "login",
      paths: ['userInfo']
    })
  ]
});
